<template>
  <div class="squad-table">
    <el-table
            :data="roleData"
            :show-header="false"
            @cell-mouse-enter="enterRow"
            @cell-mouse-leave="leaveRow"
            style="width: 100%">
      <el-table-column
              prop="number"
              label="号码"
              width="60">
      </el-table-column>
      <el-table-column
              prop="name"
              label="姓名"
              width="200">
        <template slot-scope="scope">
          <div class="player-cell">
            <img class="player-logo" :src="scope.row.playerLogo" alt="">
            <span class="myColumn" @click="enterPlayer(scope.row.playerId)">{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="nationality"
              label="国籍"
              width="190">
        <template slot-scope="scope">
          <div class="country-cell">
            <img class="country-flag" :src="scope.row.countryLogo" alt="">
            <span class="myColumn" >{{scope.row.nationality}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="appearance"
              label="出场次数(首发)"
              width="150">
      </el-table-column>
      <el-table-column
              prop="minutes"
              label="出场时间(分钟)"
              width="150">
      </el-table-column>
      <el-table-column
              prop="goals"
              label="进球"
              width="115">
      </el-table-column>
      <el-table-column
              prop="assists"
              label="助攻"
              width="115">
      </el-table-column>
      <el-table-column
              prop="cards"
              label="黄牌/红牌"
              width="122">
      </el-table-column>
      <el-table-column
              prop=""
              label=""
              width="60">
        <template slot-scope="scope">
          <img @click="enterPlayer(scope.row.playerId)" class="match-report" src="../../../assets/image/common/airPlane.svg" alt="">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "SquadTable",
    props:{
      roleData:{
        type:Array
      }
    },
    data(){
      return {

      }
    },
    methods:{
      //进入单个球员的球员报告
      enterPlayer(playerId){
        this.$router.push({ name: 'singlePlayer', params: { playerId: playerId }})
      },
      //鼠标进入当前单元格
      enterRow(row, column, cell, event){
        //获取当前单元格所在的父元素cell.parentElement
        //为父元素添加类名hover-linear-gradient，这个class可以设置背景渐变
        //这个class在css中利用穿透提前定义
        // console.log(cell);
        cell.parentElement.classList.add('hover-linear-gradient');
        //找到所在行的父元素下的第5个子元素(即最后一个小飞机单元格)
        const airPlane_column = cell.parentElement.childNodes[8].querySelector('.match-report');
        //添加类，同样在css部分提前定义类悬浮的效果为小飞机往右偏移10px
        airPlane_column.classList.add('hover-match-report');
      },
      //鼠标移除当前单元格
      leaveRow(row, column, cell, event){
        //移除高亮的类
        cell.parentElement.classList.remove('hover-linear-gradient');
        const airPlane_column = cell.parentElement.childNodes[8].querySelector('.match-report')
        //移除小飞机的类
        airPlane_column.classList.remove('hover-match-report');
      },
    }
  }
</script>

<style scoped>
  .squad-table {
    width: 1162px;
    margin: auto;
  }
  .squad-table /deep/ .el-table td {
    font-size: 20px;
    font-weight: bold;
    padding: 3px 0 ; /*no*/
    background-color: #F1F6F9;
    text-align: center;
    border-bottom:1px solid white ;
  }
  .squad-table /deep/ .is-leaf {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 8px 0 ; /*no*/
  }
  .squad-table /deep/ .hover-linear-gradient {
    background-image: linear-gradient(to left,rgba(16,199,164,0.1),rgba(114,214,191,0.5),rgba(134,179,211,0.5));
    cursor: pointer;
  }
  .squad-table /deep/ .el-table tbody tr:hover>td {
    background-color: transparent
  }
  .squad-table /deep/ .hover-match-report {
    margin-left: 20px;
    cursor: pointer;
  }
  .player-cell {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .player-cell > span {
    margin-left: 10px;
  }
  .player-logo {
    width: 35px;
    height: 35px;
  }
  .country-cell {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .country-flag {
    width: 30px;
    height: 20px;
  }
  .country-cell > span {
    margin-left: 10px;
  }
  .match-report {
    width: 30px;
    height: 30px;
  }
</style>